<template>
  <cu-layout :bgStyle="{ color: '#ffffff', title: '问卷调查' }" :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)' }">
    <view :class="[`${prefixCls}-evaluate-container`]">
      <uv-sticky offsetTop="0" :customNavHeight="$Platform.navbar">
        <view class="uv-evaluate-navbar">
          <uv-tabs :list="navList" :scrollable="false" v-model="current" :lineColor="theme" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @change="currentChange" />
        </view>
      </uv-sticky>
      <view v-if="dataList.length" class="evaluate-list">
        <!-- 账单缴费 -->
        <view class="evaluate-item" v-for="(item, index) in dataList" :key="index">
          <view class="evaluate-item-title">
            <view class="title">{{ item.name }} </view>
            <view class="btn-box">
              <view class="evaluate-item-button" @click="toAnswer(item)" v-if="item.status == 1 && current == 2">参与调研</view>
              <view class="evaluate-end-button" v-if="item.status == -1 && current == 2">已截止</view>
              <view class="evaluate-item-button" @click="toDetail(item)" v-if="current == 1">答题明细</view>
            </view>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <view v-else class="evaluate-list">
        <cu-empty mode="list" text="暂无问卷"> </cu-empty>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getQuestionList } from './api'
export default {
  name: 'question',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 2,
      start: 0,
      length: 20,
      dataList: [],
      activeStyle: { color: this.theme, fontSize: '12px' },
      inactiveStyle: { fontSize: '12px' },
      navList: [
        { name: '未作答', value: 2 },
        { name: '已作答', value: 1 },
      ],
      moreFinish: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme', 'userInfo']),
  },

  onLoad() {
    this.getData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.moreFinish = false
    this.start = 0
    this.dataList = []
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    if (!this.moreFinish) {
      this.start++
      this.getData()
    }
  },
  methods: {
    ...mapActions([]),
    async getData() {
      await this.getCleanList()
    },
    async getCleanList() {
      try {
        const { data } = await getQuestionList({ type: this.current, user_id: this.userInfo.user_id, start: this.start, length: this.length })
        // this.dataList = [{ name: '测试问卷2测试问卷2测试问卷2测试问卷2测试问卷2测试问卷2', status: 1 }]
        if (data.list.length < this.length) {
          this.moreFinish = true
        }
        this.dataList = this.dataList.concat([...data.list])
        uni.stopPullDownRefresh()
      } catch (e) {}
    },
    toAnswer(item) {
      this.$ROUTE.go('/pages/subpackage/questionnaire/detail', { id: item.id })
    },
    toDetail(item) {
      this.$ROUTE.go('/pages/subpackage/questionnaire/detail', { id: item.id, isDetail: 1 })
    },
    currentChange(e) {
      this.current = e.value
      this.moreFinish = false
      this.start = 0
      this.dataList = []
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('evaluate-container')} {
  position: relative;
  background: #f7f7f7;
  .uv-evaluate-navbar {
    background: white;
    text-align: center;
    // position: fixed;
    // width: 100%;
  }
  .evaluate-list {
    margin: 15px;
    .evaluate-item {
      background: white;
      border-radius: 8px;
      margin-bottom: 10px;
      .evaluate-item-title {
        font-size: 12px;
        font-weight: 400;
        padding: 8px 0;
        margin: 0 8px;
        border-bottom: 1px solid #f7f7f7;
        .title {
          font-size: 34rpx;
          color: $uv-primary;
          font-weight: bold;
          //超过一行省略号
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 50rpx;
        }
        .btn-box {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin: 20rpx 0 10rpx;
          .evaluate-item-button {
            width: 160rpx;
            height: 48rpx;
            background: $uv-primary;
            color: white;
            font-size: 28rpx;
            border-radius: 8rpx;
            text-align: center;
            line-height: 48rpx;
          }
          .evaluate-end-button {
            width: 160rpx;
            height: 48rpx;
            background: gray;
            color: #000;
            font-size: 28rpx;
            border-radius: 8rpx;
            text-align: center;
            line-height: 48rpx;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.popup-container {
  width: 100%;
  min-height: 400rpx;
  max-height: 900rpx;
  box-sizing: border-box;
  padding: 24rpx 32rpx;
  .popup-header {
    display: flex;
    justify-content: space-between;
    .left {
      width: 32rpx;
      visibility: hidden;
    }
    .center {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
    }
    .right {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
  .popup-main {
    .step {
      image {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
      }
      text {
        margin: 40rpx 0;
        display: block;
        text-align: center;
      }
    }
    .flex {
      display: flex;
    }
    .justify-around {
      justify-content: space-around;
    }
    .bottom-box {
      margin-top: 20rpx;
      .tag-wrap {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        margin: 20rpx 0;
        .tag-item {
          min-width: 30%;
          border: 2rpx solid black;
          padding: 8rpx 30rpx;
          font-size: 24rpx;
          text-align: center;
          border-radius: 8rpx;
          margin-left: 25px;
          margin-bottom: 15rpx;
        }
        .active-item {
          border-color: #ef4f12;
          background: #ef4f12;
          color: white;
        }
      }
    }
    .evaluate-button {
      margin-top: 40rpx;
      box-sizing: border-box;
      padding: 30rpx 0;
      color: white;
      background: #cccccc;
      border-radius: 8rpx;
      text-align: center;
    }
    .isSubmit {
      background: #ef4f12;
      color: white;
    }
  }
  .button-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    width: calc(100% - 32px);
    padding: 0 32rpx 32rpx;
    .button {
      font-weight: 400;
      font-size: 28rpx;
      padding: 24rpx 0;
      width: calc(50% - 17rpx);
      border-radius: 200rpx;
      text-align: center;
    }
    .cancel {
      background: #ffffff;
      border: 2rpx solid $uv-primary;
      color: $uv-primary;
    }
    .submit {
      background: $uv-primary;
      color: #ffffff;
    }
  }
}
</style>
